Estoy construyendo una calculadora de propinas que tiene una cuadrícula de botones para posibles porcentajes. Cuando se selecciona cualquier botón de sugerencia, quiero que cambien la fuente y el color de fondo. Aquí está mi problema, si tengo un botón de sugerencia seleccionado y luego cambio el enfoque a un botón de sugerencia diferente, ¿desaparece el texto en el botón de sugerencia previamente enfocado? Y luego, si pasas el cursor sobre él, vuelve a aparecer.
Tengo una clase en CSS para el color de fuente de cualquier botón no seleccionado. En el evento de clic, intenté recorrer cada botón en la cuadrícula y agregar manualmente esa fuente usando el DOM, pero sigo teniendo este problema de "texto que desaparece". ¿Necesito estar haciendo algo con el evento 'borroso'? ¡Estoy atascado! Aquí está mi código para esta cuadrícula de botones:
tipTiles.forEach((el) => { el.addEventListener("click", (e) => { tipTiles.forEach((tile) => { if (tile.classList.contains("btn-bg2")) { tile.classList.remove("btn-bg2"); tile.classList.remove("btn-font2"); tile.classList.add("btn-font1"); } e.currentTarget.classList.add("btn-bg2"); e.currentTarget.classList.add("btn-font2"); }); }); });Enlace al proyecto a continuación:
Prueba esto, debe solucionar tu problema :)
<li class="tip-tile" tabindex="0">
.tip-tile:last-child { color: unset; text-align: center; padding: 0.5rem; border-radius: 5px; font-size: 1.2rem; background-color: #f4fafa; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; }
tipTiles.forEach((el) => { tipTiles.forEach((tile) => { tile.classList.remove("tip-tile"); tile.classList.add('btn-bg1', 'btn-font1', 'tip-tile'); }); el.addEventListener("click", (e) => { tipTiles.forEach((tile) => { if (tile.classList.contains('btn-bg2')) { tile.classList.remove("tip-tile"); tile.classList.replace("btn-bg2", "btn-bg1"); tile.classList.replace("btn-font2", "btn-font1"); tile.classList.add("tip-tile"); } e.currentTarget.classList.replace("btn-bg1", "btn-bg2"); e.currentTarget.classList.replace("btn-font1", "btn-font2"); }); }); });
resetBtn.addEventListener("click", function () { if (totalAmount.textContent !== 0) { totalAmount.textContent = "$0.00"; tipAmount.textContent = "$0.00"; billField.value = 0; peopleField.value = 0; resetBtn.classList.remove("btn-bg2"); tipTiles.forEach((tile) => { if (tile.classList.contains("btn-bg2")) { tile.classList.remove("tip-tile"); tile.classList.replace("btn-bg2", "btn-bg1"); tile.classList.replace("btn-font2", "btn-font1"); tile.classList.add("tip-tile"); } }); } });